<template>
	<view class="system-container">
		<view class="page-setting">
			<text class="title">振动设置</text>
			<view class="row sys-flex">
				<text class="text">提醒灵敏度调节</text>
				<evan-switch class="switch-block" v-model="checked" active-color="#22C886" inactive-color="#CCCCCC" :size="38"></evan-switch>
			</view>
			<view class="row slider-box">
				<image class="down" src="../../static/images/volume-down.png" mode=""></image>
				<range-slider :width="610" :height="20" :blockSize="40" :bar-height="4" background-color="#CCCCCC" active-color="#22C886"
				 :min="0" :max="100" :step="1" :liveMode="true" @rangechange="rangechange">
				</range-slider>
				<image class="up" src="../../static/images/volume-up.png" mode=""></image>
			</view>
			<view class="row sys-flex">
				<text class="text">灯光常亮</text>
				<picker @change="changeTime" :range="timeArray">
					<view class="text-right">{{timeValue}}</view>
				</picker>
			</view>
		</view>
		<view class="page-setting">
			<text class="title">信息设置及修改</text>
			<navigator class="row sys-flex" url="../admin-auth/admin-auth">
				<text class="text">管理员权限:</text>
				<text class="text-right underline">点击修改</text>
			</navigator>
			<view class="row sys-flex noborder" @click="showGuardian">
				<text class="text">监护人电话:{{jhtel}}</text>
				<text class="text-right underline">点击修改</text>
			</view>
			<view class="row sys-flex" @click="showContact">
				<text class="text">预存联系人:{{lxtel}}</text>
				<text class="text-right underline">点击修改</text>
			</view>
		</view>
		<uni-popup ref="showGuardianPopup" type="center">
			<image src="../../static/images/popup-bg.png" mode="" class="popbg"></image>
			<input class="popup-input" v-model="guardianTel" placeholder="请输入新的监护人号码" />
			<button class="popup-button" @click="saveGuardian">保存</button>
		</uni-popup>
		<uni-popup ref="contactPersonPopup" type="center">
			<image src="../../static/images/popup-bg.png" mode="" class="popbg"></image>
			<input class="popup-input" v-model="contactTel" placeholder="请输入新的预存联系人号码" />
			<button class="popup-button" @click="saveContactPerson">保存</button>
		</uni-popup>
	</view>
</template>

<script>
	import evanSwitch from "../../components/evan-switch/evan-switch.vue"
	import RangeSlider from '../../components/range-slider/range-slider.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'

	export default {
		data() {
			return {
				checked: true,
				// 时间选择
				timeArray: ["5分钟", "10分钟", "15分钟"],
				// 选择的时间
				timeValue: "5分钟",
				// 监护人电话
				guardianTel: "",
				// 联系人电话
				contactTel: "",
				// 设备号
				package_no: "",
				// 显示的监护人电话
				jhtel: "",
				// 显示的联系人电话
				lxtel: ""
			}
		},
		onLoad(options) {
			this.package_no = options.package_no
		},
		methods: {
			rangechange(options) {
			},
			/**
			 * 修改时间
			 * @param {Object} e
			 */
			changeTime(e) {
				this.timeValue = this.timeArray[e.detail.value]
				// this.$myRuquest({
				// 	url: "/jsl/Hardware/doHarware",
				// 	data: {
				// 		"requestParams": {
				// 			"procedure": {
				// 				"packageNo": "",
				// 				"type": type,
				// 			},
				// 		}
				// 	}
				// }).then(res => {
				// }).catch()
			},
			/**
			 * 监护人电话
			 */
			showGuardian() {
				this.$refs.showGuardianPopup.open()
			},
			/**
			 * 联系人电话
			 */
			showContact() {
				this.$refs.contactPersonPopup.open()
			},
			/**
			 * 保存监护人电话
			 */
			saveGuardian() {
				if (!this.guardianTel) {
					uni.showToast({
						title: "监护人号码不能为空",
						icon: "none"
					})
				} else {
					this.$refs.showGuardianPopup.close()
				}
				this.$myRuquest({
					url: "/jsl/user/addEquipmentNumber",
					data: {
						"requestParams": {
							"procedure": {
								"p_uid": uni.getStorageSync('p_uid'),
								"p_package_no": this.package_no,
								"p_supervise_one": this.guardianTel,
								"p_supervise_two": this.guardianTel,
								"p_answer_mode": 1
							}
						}
					}
				}).then(res => {
					uni.showToast({
						title: "保存成功"
					})
					this.jhtel = this.guardianTel
					this.$refs.showGuardianPopup.close()
				}).catch(() => {
					uni.showToast({
						title: "设置失败"
					})
				})
			},
			/**
			 * 保存联系人电话
			 */
			saveContactPerson() {
				if (!this.contactTel) {
					uni.showToast({
						title: "联系人号码不能为空",
						icon: "none"
					})
				} else {
					this.$refs.contactPersonPopup.close()
				}
				this.$myRuquest({
					url: "/jsl/user/addEquipmentNumber",
					data: {
						"requestParams": {
							"procedure": {
								"p_uid": uni.getStorageSync('p_uid'),
								"p_package_no": this.package_no,
								"p_contact": this.contactTel,
								"p_answer_mode": 1
							}
						}
					}
				}).then(res => {
					uni.showToast({
						title: "保存成功"
					})
					this.lxtel = this.contactTel
					this.$refs.contactPersonPopup.close()
				}).catch(() => {
					uni.showToast({
						title: "设置失败"
					})
				})
			}
		},
		components: {
			evanSwitch,
			RangeSlider,
			uniPopup,
			uniPopupMessage,
			uniPopupDialog
		}
	}
</script>

<style lang="scss">
	page {
		background: #f4f4f4;
	}

	.system-container {
		.page-setting {
			margin: 44rpx 0 11rpx;

			.title {
				font-size: 20rpx;
				color: #343434;
				margin-left: 24rpx;
				margin-bottom: 8rpx;
			}

			.row {
				padding: 0 24rpx;
				height: 70rpx;
				background: #ffffff;

				.text {
					font-size: 30rpx;
					line-height: 30rpx;
					color: #343434;
				}

				.text-right {
					font-size: 24rpx;
					line-height: 30rpx;
					color: #666666;

					&.underline {
						padding-top: 8rpx;
						padding-bottom: 8rpx;
						border-bottom: 3rpx solid #666666;
					}
				}

				&.sys-flex {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-top: 1rpx solid #DBDBDB;
					border-bottom: 1rpx solid #DBDBDB;
				}

				&.noborder {
					border: 0;
				}

				&.slider-box {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.up {
						display: block;
						width: 32rpx;
						height: 38rpx;
					}

					.slider-block {
						width: 640rpx;
						margin-left: 16rpx;
						margin-right: 16rpx;
					}

					.down {
						display: block;
						width: 32rpx;
						height: 38rpx;
					}
				}
			}
		}
	}

	.popbg {
		position: fixed;
		display: block;
		width: 734rpx;
		height: 403rpx;
		top: 264rpx;
		left: 50%;
		transform: translate(-50%, 0);
	}

	.popup-input {
		position: fixed;
		top: 363rpx;
		left: 50%;
		transform: translate(-50%, 0);
		width: 470rpx;
		height: 90rpx;
		border: 1rpx solid #21C885;
		border-radius: 6rpx;
		line-height: 90rpx;
		color: #999;
		font-size: 24rpx;
		padding: 0 27rpx;
		box-sizing: border-box;
	}

	.popup-button {
		position: fixed;
		top: 498rpx;
		left: 50%;
		transform: translate(-50%, 0);
		width: 240rpx;
		height: 80rpx;
		background: #21C885;
		color: #fff;
		line-height: 80rpx;
	}
</style>
